<template>
  <div class="solveManage">
    <div class="botTable">
      <div class="optServiceInfo">
        <el-button plain size="mini" type="primary" @click="dynamicBtn">动态录入</el-button>
        <el-button plain size="mini" type="primary" @click="dynamicEdit">动态编辑</el-button>
        <el-button plain size="mini" type="primary" @click="optServiceDel">动态删除</el-button>
        <el-button plain size="mini" type="primary" @click="optServiceDel">一键发布</el-button>
        <el-button plain size="mini" type="primary" @click="optServiceDel">取消发布</el-button>
      </div>
      <el-table :data="mainBotTableData" border :height="mainBotHeight" :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="mainBotRowClick">
          <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="tayNo" label="作业时间" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="tayIeflag" label="作业动作" width="110" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="cltName" label="作业地点" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayStates" label="内容" show-overflow-tooltip  sortable ></el-table-column>
          <el-table-column prop="tayStates" label="操作时间" show-overflow-tooltip  sortable ></el-table-column>
          <el-table-column prop="tayStates" label="操作员工" width="110" show-overflow-tooltip  sortable ></el-table-column>
          <el-table-column prop="tayStates" label="是否发布" width="110" show-overflow-tooltip  sortable ></el-table-column>
          <el-table-column prop="tayStates" label="备注" show-overflow-tooltip  sortable ></el-table-column>
      </el-table>
    </div>
    <!-- 主页下方 服务动态列表动态录入弹窗 -->
    <el-dialog v-el-drag-dialog :title="dynamicTitle" :visible.sync="dynamicDialog" width="40%" style="top: 12vh" :close-on-click-modal='false'>
      <el-form ref="dynamicForm" :model="dynamicForm" :rules="dynamicRules" label-width="90px"  :inline="true" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业动态:" prop="workDynamic">
              <el-popover placement="bottom" width="500" @show="nowShow4" @hide="nowHide4" trigger="click">
                <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                  <el-input v-model="dynamicForm.workDynamic" clearable @focus="workDynamicMsg" size="mini"></el-input>
                  <span class="el-input__suffix">
                    <span class="el-input__suffix-inner">
                      <i class="el-select__caret el-input__icon " :class="isShow4?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                    </span>
                  </span>
                </div>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业时间:" prop="workTime">
              <el-date-picker v-model="dynamicForm.workTime" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否发布:" prop="issue">
              <el-select v-model="dynamicForm.issue" filterable clearable>
                <el-option
                  v-for="item in statusLists"
                  :key="item.UUID"
                  :label="item.CLT_NAME"
                  :value="item.UUID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="作业地点:" prop="workPlace">
              <el-input v-model="dynamicForm.workPlace" clearable style="width: 450px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="内容:" prop="content">
              <el-input type="textarea" v-model="dynamicForm.content" style="width: 500px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注:" prop="note">
              <el-input type="textarea" v-model="dynamicForm.note" style="width: 500px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dynamicDialog = false">取消</el-button>
        <el-button type="primary" @click="dynamicSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import selectedComponent from '../SeaRailAdministration/selectedComponent'
export default {
  mixins: [resizeMixin, paginationMixin],
  data(){
    return{
      mainBotTableData: [], // 列表信息
      mainBotHeight: 750, // 主页下方 订单详情表格高度
      dynamicTitle: '', // 弹出框标题
      dynamicDialog: false, // 弹出框出现隐藏
      dynamicForm: {
        workDynamic: '', // 作业动态
        workTime: '', // 作业时间
        issue: '', // 是否发布
        workPlace: '', // 作业地点
        content: '', // 内容
        note: '', // 备注
      },
      isShow4:false,
      selectMsg:'',
      dynamicRules: {
        workDynamic: [
          { required: true, message: '作业动态不能为空', trigger: 'blur' },
        ],
        workTime: [
          { required: true, message: '作业时间不能为空', trigger: 'blur' },
        ],
        issue: [
          { required: true, message: '是否发布不能为空', trigger: 'blur' },
        ],
        workPlace: [
          { required: true, message: '作业地点不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  components: {
    selectedComponent
  },
  created(){

  },
  mounted(){

  },

  methods:{
    //动态录入
    dynamicBtn() {
      this.dynamicTitle = '动态录入'
      this.dynamicDialog = true
    },
    //动态编辑
    dynamicEdit() {
      this.dynamicTitle = '动态编辑'
      this.dynamicDialog = true
    },
    nowShow4() {
      this.isShow4 = true
    },
    nowHide4(){
      this.isShow4 = false
    },
    // 作业动态
    workDynamicMsg() {
      this.selectMsg = 'workDynamic'
    },
  }
}
</script>

<style lang="scss" scoped>
.solveManage {
    .botTable{
      padding-top: 10px;
    }
    .optServiceInfo{
    padding-left: 10px;
    padding-bottom: 10px;
    }

}
// 弹窗内的样式
.dialogBox {
  width: 100%;
  // height: 700px;
  .basicBox {
    width: 100%;
    height: 340px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    ::v-deep .el-select {
      .el-input__inner {
        width: 178px;
      }
    }
  }
  .serveBox {
    width: 100%;
    height: 280px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .serveContent {
      margin-top: 50px;
      width: 100%;
      height: 218px;
      display: flex;
      justify-content: space-between;
      // background-color: #175993;
      .serveContentLeft {
        width: 60%;
        height: 100%;
        border-right: 1px solid #ccc;
        // background-color: #175993;
      }
      .serveContentRight {
        width: 39%;
        height: 100%;
        // background-color: aqua;
        .srBtnBox {
          margin-bottom: 5px;
        }
      }
    }
  }
  .solveMethodsDetailBox {
    width: 100%;
    height: 220px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .goodsInfoBox {
    width: 100%;
    height: 280px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .goodsBtnBox {
      padding-left: 15px;
      margin-bottom: 15px;
    }
  }
  .truckServiceBox {
    width: 100%;
    height: 260px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .serviceBox {
      width: 100%;
      height: 195px;
      display: flex;
      justify-content: center;
      align-items: center;
      .startBox {
        width: 50%;
        height: 100%;
        border-right: 1px solid #ccc;
        .startTitle {
          padding-left: 10px;
          font-weight: 600;
          color: #000;
        }
        .detailAddressBox {
          ::v-deep .el-input__inner {
            width: 430px;
          }
        }
        ::v-deep .el-input__inner {
          width: 140px;
        }
      }
      .endBox {
        width: 50%;
        height: 100%;
        .endTitle {
          padding-left: 10px;
          font-weight: 600;
          color: #000;
        }
        .detailAddressBox {
          ::v-deep .el-input__inner {
            width: 430px;
          }
        }
        ::v-deep .el-input__inner {
          width: 140px;
        }
      }
    }
  }
  .attachmentInfoBox {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
  }
  .agreeFeeInfoBox {
    margin: 20px 0;
    height: 110px;
    width: 100%;
    border: 1px solid #ccc;
  }
  .auditInfoBox {
    width: 100%;
    height: 130px;
    border: 1px solid #ccc;
    .auditInfoBot {
      width: 100%;
      // height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 400px 0 20px;
    }
  }
}

// 操作服务信息新增弹窗样式
.orderOptBox {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
  padding-top: 30px;
  .orderOptTitle {
    position: absolute;
    top: -12px;
    background-color: #fff;
  }
  ::v-deep .el-input__inner {
    width: 178px;
  }
}


// 弹窗标题样式
.basicTitle {
  width: 100%;
  // border: 1px solid #dfdfdf;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0 10px #ccc;
  position: relative;
  display: block;
  float: left;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.basicTitle span {
  width: 150px;
  height: 50px;
  display: block;
  float: left;
  font-size: 18px;
  color: #fff;
  background: #175993;
  text-align: center;
  line-height: 50px;
}
.basicTitle .icon {
  width: 50px;
  height: 50px;
  background: #175993;
  display: block;
  float: left;
  span {
    color: #fff;
    font-size: 3rem;
    text-align: left;
    padding-left: 1.4rem;
  }
}
.basicTitle .order_span2 {
  width: auto;
  height: 50px;
  padding: 0px 15px;
  display: block;
  float: left;
  font-size: 18px;
  background: none;
  color: #33495e;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}
</style>